<template>
        <view class="previewLayout">
                <swiper circular>
                        <swiper-item v-for="item in 5">
                                <image @click="toHideMask" src="/static/wallpaper/w7.jpg"></image>
                        </swiper-item>
                </swiper>

                <view class="mask" v-if="showMask">
                        <view class="back" @click="toBack">
                                <uni-icons type="back" size="20" color="#ffffff"></uni-icons>
                        </view>

                        <view class="count">4 / 8</view>

                        <view class="time">
                                <uni-dateformat :date="Date.now()" format="hh:mm"></uni-dateformat>
                        </view>
                        <view class="date">
                                <uni-dateformat :date="Date.now()" format="yyyy年MM月dd日"></uni-dateformat>
                        </view>

                        <!-- 图片信息栏 -->
                        <view class="footer">
                                <view class="box" @click="showPopup">
                                        <uni-icons type="info" size="28"></uni-icons>
                                        <text class="text">信息</text>
                                </view>
                                <view class="box">
                                        <uni-icons type="star" size="28"></uni-icons>
                                        <text class="text">喜欢</text>
                                </view>
                                <view class="box">
                                        <uni-icons type="download" size="28"></uni-icons>
                                        <text class="text">下载</text>
                                </view>
                        </view>
                </view>
                
                <!-- 弹出层 -->
                <uni-popup type="bottom" ref="popup">
                        <view class="popupInfo">
                                <view class="popupHeader">
                                        <view class="title">壁纸信息</view>
                                        <uni-icons type="close" size="18" @click="closePopup"></uni-icons>
                                </view>
                                
                                <scroll-view>
                                        <view class="row">
                                                <view class="lable">壁纸ID:</view>
                                                <text selectable class="value">123456</text>
                                        </view>
                                        <view class="row">
                                                <view class="lable">分类:</view>
                                                <text selectable class="value">风景</text>
                                        </view>
                                        <view class="row">
                                                <view class="lable">发布者:</view>
                                                <text selectable class="value">小明</text>
                                        </view>
                                        <view class="row">
                                                <view class="lable">评分:</view>
                                                <text selectable class="value rateBox">
                                                        <uni-rate readonly touchable value="5"></uni-rate>
                                                        <text class="score">5星</text>
                                                </text>
                                        </view>
                                        <view class="row">
                                                <view class="lable">摘要:</view>
                                                <text selectable class="value">图片的摘要</text>
                                        </view>
                                </scroll-view>
                        </view>
                </uni-popup>
        </view>
</template>

<style lang="scss">
        .previewLayout {
                width: 100%;
                height: 100vh;
                position: relative;

                swiper {
                        width: 100%;
                        height: 100%;

                        image {
                                width: 100%;
                                height: 100%;
                        }
                }

                .mask {
                        &>view {
                                position: absolute;
                                color: white;
                                margin: auto;
                                left: 0;
                                right: 0;
                                width: fit-content;
                        }

                        // 返回按钮
                        .back {
                                width: 60rpx;
                                height: 60rpx;
                                left: 30rpx;
                                top: 30rpx;
                                margin-left: 0;
                                background-color: rgba(0, 0, 0, 0.5);
                                border-radius: 50%;
                                backdrop-filter: blur(10px);
                                display: flex;
                                justify-content: center;
                                align-items: center;
                        }

                        .count {
                                // 10vh相当于视口高度的10%
                                top: 10vh;
                                background-color: rgba(0, 0, 0, 0.3);
                                padding: 8rpx 28rpx;
                                border-radius: 40rpx;
                                backdrop-filter: blur(10px);
                                font-size: 28rpx;
                        }

                        .time {
                                font-size: 150rpx;
                                // 10vh + 80rpx 表示视口高度10% + (80 / 750屏幕宽度)
                                top: calc(10vh + 80rpx);
                                font-weight: 100;
                                line-height: 1em;
                                text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
                        }

                        .date {
                                font-size: 35rpx;
                                top: calc(10vh + 80rpx + 150rpx);
                                text-shadow: 0 2rpx rgba(0, 0, 0, 0.3);
                        }

                        .footer {
                                bottom: 10vh;
                                background-color: rgba(255, 255, 255, 0.8);
                                width: 65vw;
                                height: 120rpx;
                                display: flex;
                                justify-content: space-around;
                                align-items: center;
                                backdrop-filter: blur(20px);
                                border-radius: 60rpx;
                                color: black;
                                box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.1);

                                .box {
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        padding: 2rpx 12rpx;

                                        .text {
                                                font-size: 26rpx;
                                        }
                                }
                        }
                }
                
                // 弹出层
                .popupInfo {
                        background-color: white;
                        padding: 30rpx;
                        border-radius: 30rpx 30rpx 0 0;
                        overflow: hidden;

                        // 弹出层头部
                        .popupHeader {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                .title {
                                        font-size: 26rpx;
                                }

                                .close {
                                        padding: 6rpx;
                                }
                        }

                        // 弹出层内容
                        scroll-view {
                                max-height: 60vh;

                                .row {
                                        display: flex;
                                        margin: 16rpx 0;
                                        font-size: 32rpx;

                                        .lable {
                                                width: 150rpx;
                                                text-align: right;
                                        }

                                        .value {
                                                flex: 1;
                                                width: 0;
                                        }

                                        .rateBox {
                                                display: flex;
                                                align-items: center;

                                                .score {
                                                        margin-right: 10rpx;
                                                        font-size: 28rpx;
                                                }
                                        }
                                }
                        }
                }
        }
</style>

<script setup>
        import {
                ref
        } from 'vue';
        // 默认情况下显示mask
        const showMask = ref(true);
        // 弹出层状态控制
        const popup = ref(null);

        // 返回上一页
        const toBack = () => {
                uni.navigateBack();
        }

        // 控制mask的显示与隐藏
        const toHideMask = () => {
                showMask.value = !showMask.value;
        }

        // 显示弹出层
        const showPopup = () => {
                popup.value.open();
        }

        // 关闭弹出层
        const closePopup = () => {
                popup.value.close();
        }
</script>